<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	{{ cssStyle }}
  </head>

  <body id="index" class="home">
    <header id="banner" class="body"> 
    <h1>McCanada</h1>
    <h2>I'm enjoyin' it</h2>

    <nav> 
    <ul> 
      <li><a href="/health">Home</a></li> 
    </ul> 
    </nav> 
    </header> 

    <section id="content" class="body">	
    <table>
      <tr>
        <td>Item</td>
        <td>Cost</td>
      </tr>
      {% for item in items %}
      <tr>
        <td>{{ item.name }}</td>
        <td>${{ item.cost }}</td>
      </tr>
      {% endfor %}
      <tr>
        <td>Total</td>
        <td>${{ total }}</td>
      </tr>
    </table>

    <form action="/" method="post">
      <input style="float:left;" type="submit" value="Back">
    </form>
    <form method="post" action="purch">
      {% for item in items %}
      <input type="hidden" name="{{ item.key }}" value="1">
      {% endfor %}
      <input type="submit" value="Purchase">
    </form>
    </section>

    <footer id="contentinfo" class="body">
    McCanada 311
    </footer>


  </body>
</html>
